import { Form, Input, Button, DatePicker, TextArea, ImageUploader, Toast, Selector, } from 'antd-mobile';
import { useState } from 'react';
import { getToken } from '../../utils/const.ts';
import { request } from '../../utils/request.ts';
import dayjs from 'dayjs';

export default function Register() {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([]);
  const [visible, setVisible] = useState(false);
  const [birthday, setBirthday] = useState();

  const onFinish = async (values) => {
    const { pic, ...other } = values;
    const res = await request('/openapi/coachRegister', {
      method: 'POST',
      data: {
        ...other,
        pic: pic?.[0]?.url,
      },
      isToken: false,
    });
    if (res.data) {
      Toast.show({ content: res.msg, position: 'bottom' });
    }
  };

  const fetchUpload = async (file) => {
    const formData = new FormData();
    formData.append('file', file);
    const res = await request('/uploadFile', {
      method: 'POST',
      data: formData,
      // headers: {
      //   token: getToken(),
      // },
      isToken: false,
    });
    console.log(res);
    return { url: res.data };    
  }

  return (
    <div style={{ padding: 16 }}>
      <Form form={form} layout="vertical" onFinish={onFinish} footer={
        <Button block type="submit" color="primary" size="large">
          提交注册
        </Button>
      }>
        <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item name="mobilephone" label="手机号" rules={[{ required: true, message: '请输入手机号' }]}>
          <Input placeholder="请输入手机号" type="tel" />
        </Form.Item>
        <Form.Item name="address" label="单位信息" rules={[{ required: true, message: '请输入单位信息' }]}>
          <Input placeholder="请输入单位信息" />
        </Form.Item>
        <Form.Item name="idcard" label="身份证号码" rules={[{ required: true, message: '请输入身份证号码' }]}>
          <Input placeholder="请输入身份证号码" />
        </Form.Item>
        <Form.Item name='sex' label='性别' rules={[{ required: true, message: '请选择性别' }]}>
          <Selector
            columns={2}
            options={[
              { label: '女', value: '女' },
              { label: '男', value: '男' },
            ]}
          />
        </Form.Item>
        <Form.Item name="birthday" label="生日" rules={[{ required: true, message: '请选择生日' }]}>
          <div onClick={() => setVisible(true)}>
            <Input
              value={birthday ? dayjs(birthday).format('YYYY-MM-DD') : ''}
              placeholder="请选择生日"
              readOnly
            />
          </div>
          <DatePicker
            visible={visible}
            onClose={() => setVisible(false)}
            value={birthday}
            onConfirm={val => {
              setBirthday(val);
              form.setFieldValue('birthday', dayjs(val).format('YYYY-MM-DD'));
              setVisible(false);
            }}
          />
        </Form.Item>
        <Form.Item name="email" label="邮箱" rules={[{ required: true, message: '请输入邮箱' }]}>
          <Input placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item label="头像" name="pic" rules={[{ required: true, message: '请选择头像' }]}>
          <ImageUploader
            value={fileList}
            onChange={setFileList}
            upload={fetchUpload}
            maxCount={1}
          >
            <div style={{ width: 100, height: 100, background: '#f5f5f5', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8 }}>
              上传头像
            </div>
          </ImageUploader>
        </Form.Item>
      </Form>
    </div>
  );
} 